<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售管理系统</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
        }
        body {
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: #e74c3c;
            color: white;
            padding: 20px;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 5px;
        }
        .nav-tabs {
            display: flex;
            list-style: none;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        .nav-tabs li {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f1f1f1;
            margin-right: 5px;
            border-radius: 5px 5px 0 0;
        }
        .nav-tabs li.active {
            background-color: #e74c3c;
            color: white;
        }
        .tab-content {
            display: none;
            background-color: white;
            padding: 20px;
            border-radius: 0 5px 5px 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .tab-content.active {
            display: block;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #e74c3c;
            color: white;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #c0392b;
        }
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }
        .search-bar {
            margin-bottom: 20px;
        }
        .search-bar input {
            width: 70%;
            display: inline-block;
        }
        .search-bar button {
            width: 28%;
            margin-left: 2%;
        }
        .chart-container {
            width: 100%;
            height: 400px;
            margin-top: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 20px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chart-placeholder {
            color: #999;
            font-size: 18px;
        }
        .badge {
            display: inline-block;
            padding: 3px 7px;
            font-size: 12px;
            font-weight: bold;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            background-color: #e74c3c;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>销售管理系统</h1>
        </header>
        
        <ul class="nav-tabs">
            <li class="active" onclick="openTab('members')">会员管理</li>
            <li onclick="openTab('promotions')">促销管理</li>
            <li onclick="openTab('sales-analysis')">销售数据分析</li>
        </ul>
        
        <!-- 会员管理 -->
        <div id="members" class="tab-content active">
            <div class="search-bar">
                <input type="text" placeholder="搜索会员...">
                <button>搜索</button>
            </div>
            
            <button onclick="showAddMemberForm()">添加会员</button>
            <button>导出会员数据</button>
            
            <div id="add-member-form" style="display: none; margin-top: 20px;">
                <h3>添加新会员</h3>
                <div class="form-group">
                    <label>会员姓名</label>
                    <input type="text">
                </div>
                <div class="form-group">
                    <label>手机号码</label>
                    <input type="text">
                </div>
                <div class="form-group">
                    <label>生日</label>
                    <input type="date">
                </div>
                <div class="form-group">
                    <label>电子邮箱</label>
                    <input type="email">
                </div>
                <div class="form-group">
                    <label>会员等级</label>
                    <select>
                        <option>普通会员</option>
                        <option>银卡会员</option>
                        <option>金卡会员</option>
                        <option>钻石会员</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>初始积分</label>
                    <input type="number" value="0">
                </div>
                <button>保存</button>
                <button onclick="hideAddMemberForm()">取消</button>
            </div>
            
            <table>
                <thead>
                    <tr>
                        <th>会员ID</th>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>会员等级</th>
                        <th>当前积分</th>
                        <th>累计消费</th>
                        <th>最近消费</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>M10001</td>
                        <td>张三</td>
                        <td>13800138001</td>
                        <td>金卡会员</td>
                        <td>1250</td>
                        <td>¥5,680.00</td>
                        <td>2023-05-15</td>
                        <td>
                            <button>详情</button>
                            <button>编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td>M10002</td>
                        <td>李四</td>
                        <td>13900139002</td>
                        <td>普通会员</td>
                        <td>350</td>
                        <td>¥1,230.00</td>
                        <td>2023-05-10</td>
                        <td>
                            <button>详情</button>
                            <button>编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <div class="chart-container" style="margin-top: 30px;">
                <div class="chart-placeholder">会员消费行为分析图表</div>
            </div>
        </div>
        
        <!-- 促销管理 -->
        <div id="promotions" class="tab-content">
            <div class="alert alert-info">
                当前有 <strong>3</strong> 个进行中的促销活动
            </div>
            
            <div class="search-bar">
                <input type="text" placeholder="搜索促销活动...">
                <button>搜索</button>
            </div>
            
            <button onclick="showAddPromotionForm()">创建促销活动</button>
            
            <div id="add-promotion-form" style="display: none; margin-top: 20px;">
                <h3>创建新促销活动</h3>
                <div class="form-group">
                    <label>活动名称</label>
                    <input type="text">
                </div>
                <div class="form-group">
                    <label>活动类型</label>
                    <select>
                        <option>折扣</option>
                        <option>满减</option>
                        <option>买赠</option>
                        <option>积分加倍</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>活动商品</label>
                    <select multiple>
                        <option>可口可乐 330ml 
